<template>
	<div class="page1">
		<!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>角色管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--主体内容-->
		<div class="content">
			<!--搜索条件区域-->
			<div class="searchWrapper">
				<el-form :inline="true" label-position="right" label-width="70px" :model="formInline" class="demo-form-inline">
					<el-form-item label="城市名称">
						<el-input v-model.trim="formInline.cityName"></el-input>
					</el-form-item>
					<el-form-item label="区域编码">
						<el-input v-model.trim="formInline.areaCode"></el-input>
					</el-form-item>
					<el-form-item label="区域名称">
						<el-input v-model.trim="formInline.areaName"></el-input>
					</el-form-item>
					<el-button type="primary" icon="search" @click="searchData">查询</el-button>
					<router-link :to="{path: '/regionManageAE'}"><el-button type="success" icon="plus" @click="">添加</el-button></router-link>			
				</el-form>
			</div>
			<!--列表区域-->
			<div class="tableWrapper">
				<el-table v-loading="loading" :data="tableData" style="width: 100%" height="400">
					<el-table-column type="index" label="序号" width="70"></el-table-column>
					<el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="item in tableCols" :key="item.prop" :formatter="item.formatter"></el-table-column>
					<el-table-column label="操作" width="100">
						<template scope="scope">
							<!--<el-button type="text" @click="showDetail(scope.$index, scope.row)">详情</el-button>-->
							<el-dropdown style="color: #20a0ff; cursor: pointer;" @command="ctrlData($event, scope.$index, scope.row)">
							  <span class="el-dropdown-link">
							    操作<i class="el-icon-caret-bottom el-icon--right"></i>
							  </span>
							  <el-dropdown-menu slot="dropdown">
							    <el-dropdown-item command="view">查看</el-dropdown-item>
							    <el-dropdown-item command="edit">修改</el-dropdown-item>
							    <el-dropdown-item command="del">删除</el-dropdown-item>
							  </el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--分页器-->
			<div class="pagerWrapper">
				<div class="block">					
					<el-pagination @size-change="" @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getData
	} from '../../common/js/public.js'
	export default {
		name: 'hello',
		data () {
			return {
				total: 0,
				pageSize: 15,
				pageNum: 1,
				loading: false,
				detailFlag: false,
				tableCols: [{
					prop: 'areaName',
					label: '区域名称'
				}, {
					prop: 'areaCode',
					label: '区域编码',
					width: ''
				}, {
					prop: 'areaLevel',
					label: '区域级别',
					width: '',
					formatter (cellvalue) {
						if (cellvalue.areaLevel == 1) {
							return '城市';
						} else if (cellvalue.areaLevel == 2) {
							return '行政区';
						} else if (cellvalue.areaLevel == 3) {
							return '虚拟区域';
						}
					}
				}, {
					prop: 'parentName',
					label: '上级区域',
					width: ''
				}, {
					prop: 'cityName',
					label: '城市名称',
					width: ''
				}, {
					prop: 'areaType',
					label: '区域类型',
					width: '',
					formatter (cellvalue) {
						return cellvalue.areaType ? '虚拟区域/运维人员关联区域' : '实体区域/收费员关联区域';
					}
				}, {
					prop: 'description',
					label: '描述',
					width: ''
				}],
				tableData: [],
				formInline: {
					cityName: '',
					areaCode: '',
					areaName: ''
				}
			}
		},
		methods: {
			handleCurrentChange (val) {
		       this.pageNum = val;
		       this.searchData();
		   	},
		   	ctrlData (command, index, obj) {
				console.log(command, index, obj);
				let url;
				if (command == 'view') {
					url = '/regionManageView';
				} else if (command == 'edit') {
					url = '/regionManageAE';
				} else if (command == 'del') {
					this.delData(obj.areaId);
					return;
				}
				this.$router.push({
					path: url,
					query: obj
				});
			},
			// 搜索
			searchData () {
				this.tableData = [];
				this.loading = true;
				let opt = {
					url: '/gplus/area/queryList',
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					data: this.formInline,
					success: (res) => {
						this.tableData = res.data.AreaVO;
						this.total = res.total;
						this.loading = false;
					},
					fail: (res) => {						
						this.loading = false;
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			delData (id) {				
				let opt = {
					url: '/gplus/area/delete',
					data: {
						areaId: id 
					},
					success: (res) => {
						this.$message({
				            type: 'success',
				            message: '删除成功!'
				        });
				        this.searchData();
					},
					fail: (res) => {						
						this.loading = false;
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				  this.$confirm('此操作将永久删除该区域, 是否继续?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			       }).then(() => {			        	
					  getData(opt);			          
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消删除'
			          });          
			        });
			}
		},
		components: {	
		},
		mounted () {
		},
		computed: {			
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.breadcrumb 
	height: 30px;
	overflow: hidden;	
.content	
	background: #FFFFFF;
	overflow: hidden;
	.searchWrapper
		overflow: hidden;
		background: #EFF2F7;
		padding: 22px 22px 0;
		margin-bottom: 20px;
	.pagerWrapper
		text-align: right;		
		margin-top: 28px;
		font-size: 12px;
		.export
			font-size: 12px;
			.iconfont
				margin-right: 0;
.detail
	width: 61.4%;
	height: 82.9%;
	position: absolute;
	top: 8.6%;
	left: 20.1%;
	background: #FFFFFF;
	box-shadow: 0 0 4px 1px rgba(128,145,165,0.30);
	border-radius: 3px;	
	z-index: 1000;
	box-sizing: border-box;
	padding: 20px 0;
	.title
		position: absolute;
		background: #3F4A56;
		border-radius: 3px 3px 0 0;
		color: #fff;
		width: 100%;
		top: 0;
		left: 0;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: inherit;
		z-index: 100;
		.el-icon-close
			float: right;
			margin-top: 14px;
	.info
		margin-top: 20px;
		padding: 2.1%;	
		height: 100%;
		overflow: auto;
		box-sizing: inherit;
.mask
	background: rgba(49,53,65,0.60);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
</style>
